<!--
 * @Autor: 田甜
 * @Date: 2021-02-08 10:08:44
-->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
// import { createWebSocket } from './plugins/request/websocket.js';
import { on, off } from "view-design/src/utils/dom";
import { setMatchMedia } from "view-design/src/utils/assist";
import { mapMutations, mapState } from "vuex";
import Setting from "@/setting";
// import util from '@/libs/util';
setMatchMedia();

export default {
  name: "app",
  methods: {
    ...mapMutations("admin/layout", ["setDevice"]),
    handleWindowResize() {
      this.handleMatchMedia();
    },
    handleMatchMedia() {
      const matchMedia = window.matchMedia;
      if (matchMedia("(max-width: 600px)").matches) {
        this.setDevice("Mobile");
      } else if (matchMedia("(max-width: 992px)").matches) {
        this.setDevice("Tablet");
      } else {
        this.setDevice("Desktop");
      }
    },
  },
  mounted() {
    on(window, "resize", this.handleWindowResize);
    this.handleMatchMedia();
    if (Setting.headTitle == "测试环境") {
      document.write(`
        <style>
            button.ivu-btn-primary {
                background: #ff9900;
                border-color:#ff9900
            }
            button.ivu-btn-primary:hover{
                background: #ff9900;
                border-color:#ff9900
            }
        </style>
        `);
    }
  },
  beforeDestroy() {
    off(window, "resize", this.handleWindowResize);
  },
  created() {
    // if(util.cookies.get('token')) {
    // createWebSocket();
    // }
  },
};
</script>
<style>
.ivu-layout {
  background: #f1f4f6 !important;
}

.i-layout-tabs-main {
  background: #f1f4f6 !important;
}

.projectDd {
  text-align: center;
  max-width: 160px;
  max-height: 460px !important;
}
.ivu-table-fixed-shadow {
  height: auto !important;
}

::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
}
::-webkit-scrollbar-thumb {
  border-radius: 0.2rem;
  background-color: #999999;
}
::-webkit-scrollbar-track {
  background-color: #eee;
}
.del {
  color: red;
}
</style>
